<template>
  <view class="style-container" :style="'padding-top:' + navHeight + 'px;'">
    <view v-if="unReadNotifyCount > 0" class="list-item-right">
      {{ unReadNotifyCount }}条新订阅
    </view>
    <view v-if="!list.length" class="no-data" style="height: 660rpx">
      <Empty
        v-if="forceRefresh && loaded"
        :baseImg="emptyImg"
        :label="emptyText"
        :fontWeight="400"
        class="empty"
      />
      <!-- 没有完成职业测评 -->
      <template v-if="showFinishBtn">
        <view
          class="toPersonality"
          v-if="!list.length && loaded"
          @click="jumpToPersonality"
        >
          <text class="text">去完成</text>
          <view class="white-arrow"></view>
        </view>
      </template>
    </view>
    <scroll-view
      class="list"
      scroll-y="true"
      style="height: 74vh"
      @scrolltoupper="handleScrollToUpper"
    >
      <CareerSubscribe
        v-for="(item, index) in list"
        :key="index"
        :item="item"
        :isShowHistoryIndex="historyIndex(index)"
      />
      <u-loadmore
        v-if="list.length || (!loaded && list.length)"
        class="list-more"
        :status="moreLoading"
        :load-text="loadText"
      />
    </scroll-view>
  </view>
</template>
<script>
import WxLoginMixin from '@/mixins/wxLogin';
import share from '@/mixins/share';
import {
  getNewNotify,
  getNewNotifyList,
  rightsTree
} from '@/api/modules/career';
import CareerSubscribe from './CareerSubscribe.vue';
import Empty from '@/components/Empty.vue';
export default {
  mixins: [WxLoginMixin, share],
  components: {
    Empty,
    CareerSubscribe
  },
  props: {
    rightsList: {
      type: Array,
      default: () => []
    },
    info: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      forceRefresh: true, // 强制刷新子组件状态
      emptyText: '', // 开启订阅，请先完成职业测评
      pageTitle: '我的订阅',
      uNavColor: '#ffffff',
      // navHeight: getApp().globalData.navHeight,
      navHeight: 0,
      emptyImg: this.$imgBaseSelf + 'common/empty.png',
      personId: uni.getStorageSync('person-id').slice(2) || undefined,
      titleBarMarginTop: 0,
      srcGoBack:
        this.$imgBaseSelf + 'career/positionDictionary/major_go_back.webp',
      unReadNotifyCount: 0,
      list: [],
      pageParams: {
        pageNo: 1,
        pageSize: 20
      },
      moreLoading: 'loadmore',
      loadText: {
        loadmore: '加载更多',
        loading: '加载中',
        nomore: '已经到底啦'
      },
      loaded: false,
      showFinishBtn: false
    };
  },
  onShow() {
    console.log('--------mounted-------');
  },
  created() {
    this.getStatusBarHeight();
    console.log('--------created-------');
    this.getData();
    // this.getCareerNewNotify();
    this.rightsTreeFn();
    this.forceRefresh = false;
    this.$nextTick(() => {
      this.forceRefresh = true;
    });
  },
  mounted() {
    console.log('--------mounted-------');
  },
  onReady() {
    console.log('--------onReady-------');
  },
  onLoad() {
    console.log('--------onLoad-------');
  },
  onReachBottom() {
    console.log('--------onReachBottom-------');
    // this.getData(true);
  },
  methods: {
    rightsTreeFn() {
      // 这个uid只是作为占位，但是不能删除。
      rightsTree({ uid: '' }).then((res) => {
        if (res.code == 200) {
          let tempItem = res.data.filter((item) => item.rightId == 10);
          if (
            tempItem.length > 0 &&
            Array.isArray(tempItem[0].children) &&
            tempItem[0].children.length > 0
          ) {
            // 1未完成 2已完成 3过期不可用
            if (tempItem[0].children[0].rightStatus == 2) {
              this.showFinishBtn = false;
              this.emptyText = '暂无订阅';
            } else if (tempItem[0].children[0].rightStatus == 1) {
              this.showFinishBtn = true;
              this.emptyText = '开启订阅，请先完成职业测评~';
            } else if (tempItem[0].children[0].rightStatus == 3) {
              this.showFinishBtn = false;
              this.emptyText = '权益已过期';
            }
          } else {
            this.emptyText = '内容尚在建设中,敬请期待~';
          }
        }
      });
    },
    handleScrollToUpper() {
      // this.$emit("toUpper", {});
    },
    jumpToPersonality() {
      //需要判断用户是否已经购买了职业测评

      if (this.rightsList) {
        //先找到是否有职业测评 rightId=10
        const rightItem = this.rightsList.find((item) => item.rightId == 10);
        //如果职业测评是未购买，就跳转去购买
        if (rightItem) {
          const childItem = rightItem.children[0];
          if (childItem.rightStatus == 4) {
            let rightId = childItem.rightId;
            uni.navigateTo({
              url: `/pagesSub/careerNew/zhituPaytoC/index?rightId=${rightId}&cardType=${
                this.info.cardType || '-1'
              }`
            });
            return;
          }
        }
      }
      uni.navigateTo({
        url: `/pagesSub/career/activity/vocationalAssessment?personId=${this.personId}`
      });
    },
    clickBack() {
      uni.navigateBack();
    },
    onScroll(event) {},
    getStatusBarHeight() {
      const res = uni.getSystemInfoSync();
      this.statusBarHeight = res.statusBarHeight;
      this.titleBarMarginTop = this.statusBarHeight + 'px';
    },
    getCareerNewNotify() {
      let params = {
        personId: this.personId
      };
      getNewNotify(params).then((res) => {
        if (res && res.code == 200) {
          this.unReadNotifyCount = parseInt(res.data);
        }
      });
    },
    //获取订阅列表
    getData(isMore) {
      if (this.moreLoading == 'loading' || this.moreLoading == 'nomore') return;
      const params = {
        pageNo: this.pageParams.pageNo,
        pageSize: this.pageParams.pageSize
      };
      this.moreLoading = 'loading';
      this.loaded = false;
      getNewNotifyList(params, this.personId).then((res) => {
        this.loaded = true;
        this.moreLoading = 'loadmore';
        if (res.code == 200) {
          let data = res.data || [];
          if (isMore) {
            this.list.push(...data);
          } else {
            this.list = data;
          }
          if (data.length >= 20) {
            this.pageParams.pageNo++;
          } else {
            this.moreLoading = 'nomore';
          }
        }
      });
    },
    historyIndex(index) {
      var hisIndex = -1;
      var isFind = false;
      this.list.forEach((item, index) => {
        if (item.readFlag == 1 && !isFind) {
          //1：历史消息，2:未读消息
          hisIndex = index;
          isFind = true;
        }
      });
      if (index == hisIndex) {
        return true;
      } else {
        return false;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
$img-base-person: $img-base + 'careerPath/';

.style-container {
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-size: 100% 600rpx;
  height: 100vh;

  .styleTopContainer {
    .styleTitleContainer {
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .styleTitleLeft {
        flex: 1;

        .styleGoBack {
          width: 44rpx;
          height: 44rpx;
          margin-left: 32rpx;
        }
      }

      .styleTitleCenter {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        .styleTitleContent {
          font-weight: 800;
          color: #222222;
          line-height: 44rpx;
          font-size: 32rpx;
        }
      }

      .styleTitleRight {
        flex: 1;
      }
    }
  }
  .list-item-right {
    position: relative;
    width: 180rpx;
    margin: 24rpx auto;
    padding: 12rpx 20rpx 12rpx 40rpx;
    border-radius: 28rpx !important;
    background-color: #ededed;
    color: #222;
    font-size: 26rpx;
  }
  .list-item-right::before {
    content: '';
    position: absolute;
    top: 25rpx;
    left: 20rpx;
    width: 10rpx;
    height: 10rpx;
    background-color: red;
    border-radius: 50%;
  }
  .empty {
    margin-top: 40rpx;
    .empty_image {
      margin-bottom: 20rpx;
    }
  }
  .toPersonality {
    width: 208rpx;
    height: 56rpx;
    background: #ff711e;
    border-radius: 32rpx;
    display: flex;
    padding: 12rpx 24rpx;
    align-items: center;
    justify-content: center;
    margin: 80rpx auto;
    .text {
      font-size: 24rpx;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      color: #ffffff;
    }
    .white-arrow {
      width: 20rpx;
      height: 20rpx;
      margin-left: 2rpx;
      margin-top: 4rpx;
      background-image: url($img-base + 'careerPath/whiteArrow.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
  .list {
    .list-more {
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}
</style>
